<template>
    <div class="page">
        <div class="page-top">
            <div class="logo">
                <img src="../assets/images/blcimg/homelogo.png" alt="">
            </div>
            <img class="lang" src="../assets/images/new/home-lang.png" alt="" @click="handerPath('/member/set_lang')">
        </div>
        <div class="page-swiper">
            <swiper :options="mySwiperOption">
                <swiper-slide v-for="(item, index) in bannerList" :key="index" style="height:3.2rem">
                    <img :src="item.imgUrl" width="100%" height="100%" style="border-radius:.3rem;"/>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="page-topTab">
            <div class="page-topTab-tip">
                <!-- <img class="page-topTab-tip-icon" src="../assets/images/new/home-tip.png" alt=""> -->
                <van-notice-bar color="#2D2D2D" background="#FFFFFF">
                    <template #left-icon>
                        <img class="page-topTab-tip-icon" src="../assets/images/new/home-tip.png" alt="">
                    </template>
                    {{noticeData}}
                </van-notice-bar>
            </div>
            <div class="page-topTab-tabbar">
                <div v-for="(item, index) in tabbarData" :key="index" class="page-topTab-tabbar-item">
                    <div class="page-topTab-tabbar-item-top" @click="handerPath(item.path)">
                        <img class="page-topTab-tabbar-item-top-img" :src="item.img" alt="">
                    </div>
                    <p class="page-topTab-tabbar-item-bot">{{item.name}}</p>
                </div>
            </div>
        </div>
        <div class="page-quotations">
            <div class="page-quotations-top">
                <div class="page-quotations-top-title">
                    <p>{{ this.$t('new.doc29') }}</p>
                </div>
                <div class="page-quotations-top-more"  @click="handerPath('/quotations')">
                    <p>{{ this.$t('new.doc30') }}</p>
                </div>
            </div>
            <div class="page-quotations-bot">
                <div v-for="(item, i) in iconListTop3" :key="i" class="page-quotations-bot-item"  @click="handlerInfo(item)" v-if="item.changeRate != 0">
                    <div class="page-quotations-bot-item-img">
                        <img :src="item.icon" alt="">
                    </div>
                    <div class="page-quotations-bot-item-info">
                        <div class="page-quotations-bot-item-info-left">
                            <p class="page-quotations-bot-item-info-left-top">{{item.name}}</p>
                            <p class="page-quotations-bot-item-info-left-bot">{{item.code}}</p>
                        </div>
                        <div class="page-quotations-bot-item-info-right">
                            <p class="page-quotations-bot-item-info-right-top">${{ item.openingPrice }}</p>
                            <p class="page-quotations-bot-item-info-right-bot" :class="item.changeRate > 0 ? 'color2' : 'color1'">
                                {{getPriceData(item.openingPrice,item.changeRate)}}(<span v-if="item.changeRate > 0">+</span>{{item.changeRate}}%)
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-hot">
            <div class="page-hot-1">
                <img src="../assets/images/new/home-hot.png" alt="">
                <p>{{this.$t('new.doc31')}}</p>
            </div>
            <div class="page-hot-2">
                <div v-for="(item, i) in iconListTop3" :key="i" class="page-hot-2-item" @click="handlerInfo(item)" v-if="item.changeRate != 0">
                    <p class="page-hot-2-item-top">{{item.name}}</p>
                    <p class="page-hot-2-item-min">${{item.openingPrice}}</p>
                    <p class="page-hot-2-item-bot" :class="item.changeRate > 0 ? 'color2' : 'color1'">
                        <span v-if="item.changeRate > 0">+</span>{{item.changeRate}}%
                    </p>
                </div>
            </div>
            <div class="page-hot-3" v-if="coinBattleData">
                <div class="page-hot-3-line">
                    <div class="page-hot-3-line-left" :style="{width: leftBattlePoint}"></div>
                    <div class="page-hot-3-line-min" :style="{left: minBattlePoint}"></div>
                    <div class="page-hot-3-line-right" :style="{width: rightBattlePoint}"></div>
                </div>
                <div class="page-hot-3-text">
                    <div class="page-hot-3-text-left">
                        <p>{{coinBattleData.upCount}}</p>
                    </div>
                    <div class="page-hot-3-text-right">
                        <p>{{coinBattleData.downCount}}</p>
                    </div>
                </div>
            </div>
            <div class="page-hot-4">
                <swiper :options="myHotSwiperOption">
                    <swiper-slide v-for="(item, index) in hotData" :key="index" style="height:2.2rem">
                        <div class="articleBox">
                            <img class="articleImg" :src="item.imgUrl" alt="">
                            <div class="articleContent">
                                <p class="articleTitle">{{item.title}}</p>
                                <p class="articleMain">{{item.content}}</p>
                            </div>
                        </div>
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
            </div>
        </div>
        <div class="page-ranking">
            <van-tabs v-model="active" title-active-color="#713FF5" color="#713FF5" @click="onClickTabs">
                <van-tab v-for="(items, index) in tabsArr" :key="index" :title="items.title">
                    <div v-for="(item, i) in tabsList" :key="i" class="page-quotations-bot-item" @click="handlerInfo(item)" v-if="item.changeRate != 0">
                        <div class="page-quotations-bot-item-img">
                            <img :src="item.icon" alt="">
                        </div>
                        <div class="page-quotations-bot-item-info">
                            <div class="page-quotations-bot-item-info-left">
                                <p class="page-quotations-bot-item-info-left-top">{{item.buyCoinName}}</p>
                                <p class="page-quotations-bot-item-info-left-bot">{{item.code}}</p>
                            </div>
                            <div class="page-quotations-bot-item-info-right">
                                <p class="page-quotations-bot-item-info-right-top">${{item.openingPrice}}</p>
                                <p class="page-quotations-bot-item-info-right-bot" :class="item.changeRate > 0 ? 'color2' : 'color1'">
                                    {{getPriceData(item.openingPrice,item.changeRate)}}(<span v-if="item.changeRate > 0">+</span>{{item.changeRate}}%)
                                </p>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <bottom_nav :activeTitle="activeTitle"></bottom_nav>
    </div>
</template>

<script>
import {
    swiper,
    swiperSlide
} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
    name: 'NewHome',
    components: {
        // 注册 vue-awesome-swiper 组件
        swiper,
        swiperSlide
    },
    data() {
        return {
            activeTitle: this.$t('title.home'),
            active: 0,
            noticeData: null,
            hotData: null,
            coinBattleData: null,
            bannerList: [],
            iconList: [],
            tabsList: [],
            iconListTop3: [],
            leftBattlePoint: '50%',
            minBattlePoint: '49%',
            rightBattlePoint: '50%',
            mySwiperOption: {
                pagination: {
                    el: '.swiper-pagination', //与slot="pagination"处 class 一致
                    clickable: true, //轮播按钮支持点击
                },
                effect: 'coverflow',
                slidesPerView: 2,
                centeredSlides: true,
                autoHeight:true,
                lazyLoading : true,
                // coverflow: {
                //     rotate: 30,
                //     stretch: 10,
                //     depth: 60,
                //     modifier: 2,
                //     slideShadows : true
                // },
                //自动播放
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false
                },
                //循环
                loop:true
            },
            myHotSwiperOption: {
                pagination: {
						el: '.swiper-pagination', //与slot="pagination"处 class 一致
						clickable: true, //轮播按钮支持点击
					},
					//自动播放
					autoplay: {
						delay: 2000,
						disableOnInteraction: false
					},
					//循环
					loop:true
            },
            tabbarData: [
                {
                    img:require('../assets/images/new/home-recharge.png'),
                    name: this.$t('new.doc32'),
                    path: '/'
                },
                {
                    img:require('../assets/images/new/home-withdrawal.png'),
                    name: this.$t('new.doc33'),
                    path: '/user/withdrawal'
                },
                {
                    img:require('../assets/images/new/home-income.png'),
                    name: this.$t('new.doc34'),
                    path: '/profit/rank'
                },
                {
                    img:require('../assets/images/new/home-kf.png'),
                    name: this.$t('title.kefu'),
                    path: '/kefu'
                },
            ],
            tabsArr: [
                {
                    title: this.$t('new.doc35'),
                    type: 0
                },
                {
                    title: this.$t('new.doc36'),
                    type: 1
                }
            ],
            socket: null
        }
    },
    mounted() {
        this.getBannerList()
        this.getNotice()
        this.getHotData()
        this.getCoinBattle()
        this.getIconList()
        this.getRankingData(0)
    },
    methods:{
        getNotice() {
            this.$post('/ads/announcement').then(res => {
                if (res.code == 0) {
                    console.log('getNotice---', res)
                    this.noticeData = res.data
                }
            })
        },
        getHotData() {
            this.$post('/ads/hotModule').then(res => {
                if (res.code == 0) {
                    console.log('getHotData---', res)
                    this.hotData = res.data
                }
            })
        },
        getCoinBattle() {
            this.$post('/ads/upDownDetail').then(res => {
                if (res.code == 0) {
                    console.log('getCoinBattle---', res)
                    this.coinBattleData = res.data
                    const L = res.data.upCount / (res.data.upCount + res.data.downCount) * 100
                    this.leftBattlePoint = L + "%"
                    this.minBattlePoint = (L - 1) + "%"
                    this.rightBattlePoint = (100 - L) + "%"
                    console.log(this.leftBattlePoint, this.minBattlePoint, this.rightBattlePoint)
                }
            })
        },
        getRankingData(num) {
            this.$post('/market/getMarketType',{type: num}).then(res => {
                if (res.code == 0) {
                    this.tabsList = res.data
                }
            })
        },
        onClickTabs(name, title) {
            // console.log(name, '===', title)
            this.getRankingData(name)
        },
        handlerInfo(item) {
            this.$router.push(`/business/info?id=${item.name}&code=${item.code}&coinid=${item.buyCoinId}&sellCoinId=${item.sellCoinId}`)
        },
        handerPath(item) {
            this.$router.push(item)
        },
        getBannerList() {
            this.$post(this.URL.common.banner, {
                positionKey: 'INDEX_BANNER'
            }).then(res => {
                if (res.code == 0) {
                    this.bannerList = res.data
                }
            })
        },
        getIconList() {
            this.$post(this.URL.member.iconListConfig, {}).then(res => {
                if (res.code == 0) {
                    res.data.forEach(e => {
                        // let info = res.data.find(item => item.buyCoinName == e.name);
                        e.code = e.buyCoinName.toLowerCase() + e.sellCoinName.toLowerCase();
                        e.sellCoinId = e.sellCoinId;
                        e.buyCoinId = e.buyCoinId;
                        e.name = e.buyCoinName;
                        e.changeRate = 0;
                        e.closingPriceCny = 0;
                        e.color = 0;
                        e.icon = e.icon
                        })
                    this.iconList = res.data;
                    // console.log(this.iconList)
                    this.iconListTop3 = res.data.slice(0,3)
                    this.getData();
                }
            })
        },
        getData() {
            let _this = this;
            if (typeof WebSocket == "undefined") {
            } else {
                _this.socket = new WebSocket(process.env.WSS_URL_API)
                _this.socket.onopen = function () {
                    _this.socket.send('start:topic=market_list')
                };
                console.log(_this.socket.onmessage,'m')
                //获得消息事件
                _this.socket.onmessage = function (msg) {
                    let data = JSON.parse(msg.data);
                    console.log(data,'s')
                    if (data.data != undefined) {
                        _this.iconList.forEach(e => {
                            let info = data.data.find(item => item.code == e.code);
                            if (info != undefined) {
                                e.changeRate = info.changeRate;
                                if (parseFloat(e.openingPrice) > parseFloat(info.openingPrice)) {
                                    e.color = 2
                                } else if (parseFloat(e.openingPrice) < parseFloat(info.openingPrice)) {
                                    e.color = 1
                                } else {
                                    e.color = 0
                                }
                                e.openingPrice = info.openingPrice;

                                if (e.icon == '') {
                                    e.icon = info.icon;
                                }
                            }
                        })
                        _this.iconListTop3.forEach(e => {
                            let info = data.data.find(item => item.code == e.code);
                            if (info != undefined) {
                                e.changeRate = info.changeRate;
                                if (parseFloat(e.openingPrice) > parseFloat(info.openingPrice)) {
                                    e.color = 2
                                } else if (parseFloat(e.openingPrice) < parseFloat(info.openingPrice)) {
                                    e.color = 1
                                } else {
                                    e.color = 0
                                }
                                e.openingPrice = info.openingPrice;

                                if (e.icon == '') {
                                    e.icon = info.icon;
                                }
                            }
                        })
                    }
                };
                //关闭事件
                _this.socket.onclose = function () {
                    console.log('关闭')
                    // _this.getData();
                };
                //发生了错误事件
                _this.socket.onerror = function () {
                    //_this.getData();
                    console.log('错误')
                    //此时可以尝试刷新页面
                };
            }
        },
        //banner
        handlerBanner(item) {
        if (item.forwardHasLogin && localStorage.getItem('token') == null) {
            this.$route.push('/login');
            return;
        }
        //REWARD_RANKING佣金榜单
        console.log(item.forwardPath)
        if (item.forwardPath == 'REWARD_RANKING') {

            this.$router.push('/rewardpark');
            return;
        }
        },
        getPriceData(openingPrice, changeRate) {
            let value = (openingPrice * changeRate / 100).toFixed(2)
            if (value > 0) {
                return "+" + value
            } else {
                return value
            }
        },
        onClick(i){
            alert(i)
        }
    },
    destroyed() {
        this.socket.close()
    }
}
</script>

<style lang="less" scoped>
.color1 {
    color: #F5435A!important;
}
.color2 {
    color: #00BA7E!important;
}
.page{
    color: #333333;
    &-top{
        width: 100%;
        height: 4rem;
        background: url("../assets/images/new/home-headImg.png") no-repeat center;
        background-size: 100%;
        display: flex;
        justify-content: space-between;
        .logo{
            color: #ffffff;
            margin: .4rem 0 0 .32rem;
            width: 2rem;
            height: .8rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .lang{
            width: .48rem;
            height: .48rem;
            margin: .4rem .32rem 0 0;
        }
    }
    &-swiper{
        width: 100%;
        height: 3.2rem;
        margin-top: -2rem;
        /deep/.swiper-pagination-bullet{
            background-color: #713FF5;
        }
    }
    &-topTab{
        width: 100%;
        height: 3.2rem;
        margin-top: .32rem;
        background-color: #ffffff;
        padding: .2rem .36rem;
        &-tip{
            border-bottom: 1px solid #F0F2F7;
            &-icon{
                width:.48rem;
                height:.48rem;
                margin-top:-.16rem;
                margin-left: -.16rem;
            }
        }
        &-tabbar{
            width: 100%;
            display: flex;
            &-item{
                width: 25%;
                height: 2rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                &-top{
                    width: .8rem;
                    height: .8rem;
                    background: url("../assets/images/new/home-tabBorder.png") no-repeat center center;
                    background-size: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: .2rem;
                    &-img{
                        width: .48rem;
                        height: .48rem;
                    }
                }
                &-bot{
                    color: #373E4E;
                    text-align: center
                }
            }
        }
    }
    &-quotations{
        width: 6.86rem;
        height: 5.8rem;
        background-color: #ffffff;
        border-radius: .5rem;
        margin: .32rem .32rem;
        display: flex;
        flex-direction: column;
        &-top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: .1rem;
            &-title{
                color: #373E4E;
                font-size: .38rem;
                margin-top: .28rem;
                margin-left: .32rem;
                font-weight: bold;
            }
            &-more{
                width: 1.88rem;
                height: .64rem;
                margin-top: .32rem;
                margin-right: .32rem;
                border-radius: .1rem;
                background-color: #F7F9FC;
                display: flex;
                justify-content: center;
                align-items: center;
                p{
                    color: #713FF5;
                    font-size: .28rem;
                }
            }
        }
        &-bot{
            display: flex;
            flex-direction: column;
            width: 100%;
            &-item{
                display: flex;
                align-items: center;
                width: 100%;
                height: 1.44rem;
                &-img{
                    width: 1.44rem;
                    height: 1.44rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        width: .96rem;
                        height: .96rem;
                    }
                }
                &-info{
                    width: 5.4rem;
                    height: 1.44rem;
                    border-bottom: 1px solid #F0F2F7;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    &-left{
                        display: flex;
                        flex-direction: column;
                        &-top{
                            color: #000000;
                            font-size: .32rem;
                        }
                        &-bot{
                            color: #A4A9B3;
                            font-size: .28rem;
                        }
                    }
                    &-right{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-right: .32rem;
                        &-top{
                            color: #000000;
                            font-size: .32rem;
                        }
                        &-bot{
                            // color: #12D49C;
                            font-size: .28rem;
                        }
                    }
                }
            }
        }
    }
    &-hot{
        width: 6.86rem;
        height: 7.2rem;
        background-color: #ffffff;
        border-radius: .5rem;
        margin: .32rem .32rem;
        padding: .32rem .32rem;
        display: flex;
        flex-direction: column;
        &-1{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            img{
                width: .56rem;
                height: .56rem;
            }
            p{
                color: #373E4E;
                font-size: .4rem;
                margin-left: .1rem;
                font-weight: bold;
            }
        }
        &-2{
            display: flex;
            margin-top: .5rem;
            &-item{
                width: 33%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                &-top{
                    color: #4A4C52;
                    font-size: .32rem;
                    font-weight: 600;
                }
                &-min{
                    color: #4A4C52;
                    font-size: .32rem;
                }
                &-bot{
                    color: #4A4C52;
                    font-size: .28rem;
                }
            }
        }
        &-3{
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-top: .5rem;
            &-line{
                position: relative;
                width: 100%;
                display: flex;
                align-items: center;
                &-left{
                    height: .12rem;
                    background-color: #12D49C;
                }
                &-min{
                    position: absolute;
                    top: 0;
                    width: .12rem;
                    height: .12rem;
                    transform: skew(-50deg);
                    background-color: #FFFFFF;
                }
                &-right{
                    height: .12rem;
                    background-color: #E81A1A;
                }
            }
            &-text{
                width: 100%;
                margin-top: .15rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                &-left{
                    color: #12D49C;
                }
                &-right{
                    color: #E81A1A;
                }
            }
        }
        &-4{
            margin-top: .5rem;
            .articleBox{
                display: flex;
                .articleImg{
                    width: 2rem;
                    height: 1.8rem;
                    margin-right: .3rem;
                }
                .articleContent{
                    display: flex;
                    flex-direction: column;
                    .articleTitle{
                        color: #373E4E;
                        font-size: .32rem;
                    }
                    .articleMain{
                        color: #2D2D2D;
                        font-size: .28rem;
                        margin-top: .1rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }
                }
            }
            /deep/.swiper-pagination-bullet{
                width: .5rem;
                height: .1rem;
                background-color: #713FF5;
                margin: 0;
                border-radius: .08rem;
            }
        }
    }
    &-ranking{
        width: 100%;
        height: 7.2rem;
        background-color: #ffffff;
        padding: .32rem .32rem;
        display: flex;
        flex-direction: column;
        .page-quotations-bot{
            display: flex;
            flex-direction: column;
            width: 100%;
            &-item{
                display: flex;
                align-items: center;
                width: 100%;
                height: 1.44rem;
                &-img{
                    width: 1.44rem;
                    height: 1.44rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        width: .96rem;
                        height: .96rem;
                    }
                }
                &-info{
                    width: 5.4rem;
                    height: 1.44rem;
                    border-bottom: 1px solid #F0F2F7;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    &-left{
                        display: flex;
                        flex-direction: column;
                        &-top{
                            color: #000000;
                            font-size: .32rem;
                        }
                        &-bot{
                            color: #A4A9B3;
                            font-size: .28rem;
                        }
                    }
                    &-right{
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-right: .32rem;
                        &-top{
                            color: #000000;
                            font-size: .32rem;
                        }
                        &-bot{
                            color: #4A4C52;
                            font-size: .28rem;
                        }
                    }
                }
            }
        }
    }
}
</style>